<!-- 对话框 -->
<template>
  <view class="dislog_box" :style="{ minHeight, marginTop }">
    <view class="dislog_box_top">
      <view class="top_title">{{ title }}</view>
      <view class="top_close" @tap="hanldColse"><van-icon name="cross" /></view>
    </view>
    <view class="dislog_box_content">
      <image :src="content" mode="" v-if="showImage" />
      <text v-if="!showImage">{{ content }}</text>
    </view>
    <view class="dislog_box_message">{{ msg }}</view>
    <view class="dislog_box_btn" @tap="affirmBtn">
      <text>{{ affirm }}</text>
    </view>
  </view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "promptDialogBox",

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    minHeight: {
      type: String,
      default: "100rpx",
    },
    marginTop: {
      type: String,
      default: "50%",
    },
    title: {
      type: String,
      default: "提示",
    },
    content: {
      type: String,
      default: "这里是提示内容",
    },
    msg: {
      type: String,
      default: "这里是提示信息",
    },
    affirm: {
      type: String,
      default: "确认",
    },
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      showImage: true,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 点击关闭按钮
    hanldColse() {
      this.$emit("closeShow");
    },
    // 取消按钮
    cancelBtn() {
      this.$emit("isShow", false);
    },
    affirmBtn() {
      this.$emit("controlShow", false);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.dislog_box {
  width: 80%;
  margin: auto;
  padding: 30rpx 50rpx;
  background-color: #fff;
  .dislog_box_top {
    width: 100%;
    position: relative;
    .top_title {
      text-align: center;
      font-weight: 700;
      font-size: 40rpx;
      color: #545454;
      // text-align: center;
    }
    .top_close {
      position: absolute;
      top: 10rpx;
      right: 0;
      text-align: right;
    }
  }
  .dislog_box_content {
    text-align: center;
    margin-top: 40rpx;
    // height: 80rpx;
    color: #000;
    font-size: 32rpx;
    image {
      width: 360rpx;
      height: 205rpx;
    }
  }
  .dislog_box_message {
    height: 80rpx;
    text-align: center;
    margin: 10px auto;
  }
  .dislog_box_btn {
    background-color: #1678ff;
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    text {
      color: #fff;
      font-size: 30rpx;
    }
  }
}
</style>
